<!--
 * @Description:
 * @Author: txy
 * @Date: 2023-02-26 10:58:56
 * @LastEditTime: 2023-02-26 10:58:56
-->
<template>
	<div class="home">
		<div class="left-col">
			<div class="header">
				<h1>智慧管控中心</h1>
				<h2>城乡能源消费和碳排一体化智慧管控中心</h2>
			</div>
			<ul class="app-list">
				<li v-for="(item ,index) in appList" :key="index" @click="checkAppAcount(item)">
					<img :src="item.img" />
					<div>
						<div class="name">{{item.name}}</div>
						<div class="btn">前往系统</div>
					</div>
				</li>
			</ul>
			<NengTan v-if="pageType === '1'" :nengList="dataInfo.nenghaozl" :tanpaifangList="dataInfo.tanpaifangList" :chartData="dataInfo.chartDataFwzl" />
			<el-row v-if="pageType === '1'" :gutter="24" style="margin-top: 20px;margin-bottom: 20px;">
				<el-col :span="12">
					<HangYe :tableData="dataInfo.tableData1" title="行业碳价值TOP5" note="注：仅周口市"></HangYe>
				</el-col>
				<el-col :span="12">
					<HangYeTop :tableData="dataInfo.tableData2" title="碳服务企业TOP5" note="注：仅周口市"></HangYeTop>
				</el-col>
			</el-row>
			<NengTanInfo v-if="pageType === '2'" :tableData="dataInfo.nenghaoinfotb" :data="dataInfo.nenghaolangfei" :chartData="dataInfo.chartDataJk" />
			<EnterpriseInfo v-if="pageType === '2'" />
		</div>
		<div class="right-col">
			<div class="header">
				<h1>交易服务中心</h1>
				<h2>城市碳资源交易公共服务中心</h2>
			</div>
			<InfoList :data="dataInfo.infolist" />
			<Announcement :data="dataInfo.announcementlist" />
		</div>
		<AccountAuth ref="accountRef" @agreenAuth="agreenAuth"/>
	</div>
</template>

<script lang="ts" setup>
// import appBankingImg from '@/assets/images/workspace/app-banking.png';
// import appCheckImg from '@/assets/images/workspace/app-check.png';
import app_1 from '@/assets/images/worktable/icon_app_1.png';
import app_2 from '@/assets/images/worktable/icon_app_2.png';
import app_3 from '@/assets/images/worktable/icon_app_3.png';
import app_4 from '@/assets/images/worktable/icon_app_4.png';
import icon_1 from '@/assets/images/worktable/icon_1.png';
import icon_2 from '@/assets/images/worktable/icon_2.png';
import icon_3 from '@/assets/images/worktable/icon_3.png';
import icon_4 from '@/assets/images/worktable/icon_4.png';
import icon_5 from '@/assets/images/worktable/icon_5.png';
import icon_6 from '@/assets/images/worktable/icon_6.png';
import icon_7 from '@/assets/images/worktable/icon_7.png';
import icon_8 from '@/assets/images/worktable/icon_8.png';
import icon_9 from '@/assets/images/worktable/icon_9.png';
import icon_10 from '@/assets/images/worktable/icon_10.png';
import icon_11 from '@/assets/images/worktable/icon_11.png';
import img_1 from '@/assets/images/worktable/img_1.png';
import img_2 from '@/assets/images/worktable/img_2.png';
import img_3 from '@/assets/images/worktable/img_3.png';
import img_4 from '@/assets/images/worktable/img_4.png';
import { ref, reactive, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
// import { usersEdit } from "../../ajax/index";
import AccountAuth from '../workspace/accountAuth.vue';
import HangYe from './components/HangYe.vue';
import HangYeTop from './components/HangYeTop.vue';
import NengTan from './components/NengTan.vue';
import NengTanInfo from './components/NengTanInfo.vue';
import EnterpriseInfo from './components/EnterpriseInfo.vue';
import InfoList from './components/InfoList.vue';
import Announcement from './components/announcement.vue';
import { 
	getHomeWasteDiscriminate,
	getHomeMainDetail,
	getHomeServiceOverview,
	getHomeMonitorEnt,
	getHomeIndustry,
	getHomeEnt,
	getHomeEnergyOverview,
	getHomeCarbonOverview
} from '@/ajax/index';
const { proxy } = getCurrentInstance() as any;
const $router = useRouter();
const store = useStore();
const userInfo:any = computed(() => store.state.user.userInfo);
const appList = ref([]) as any
// const hyTableData = ref([]) as any
const accountRef = ref()
let accountFormVisible = ref(false)
let appInfo = ref({})
let pageType = ref('1')
// pageType.value = '1'
// const loginUrl = process.env.BASE_URL_LP
// const loginUrlLocal = import.meta.env.VITE_LP_URL;
// const lpUrl = loginUrl?loginUrl:loginUrlLocal
// console.log(`loginUrl `+loginUrl)
// console.log(`loginUrlLocal `+loginUrlLocal)
//authorityApp 授权登录应用(1:绿评 2:绿金)
appList.value = [
     {
        id: 1,
        name: "能碳系统",
        img: app_1,
        // link: "http://101.200.62.30/",
        link: `http://carbon.c9fb8739bee81407993186d2c40be48a2.cn-shanghai.alicontainer.com/overview`,
        isBind: false
    },
     {
        id: 2,
        name: "观碳系统",
        img: app_2,
        // link: "http://101.200.62.30/",
        link: `http://121.36.96.52:29000/dcc-carborn/sys/sso/carbon/validateLogin`,
        isBind: false
    },
    {
        id: 3,
        name: "感碳系统",
        img: app_3,
        // link: "http://101.200.62.30/",
        link: `http://113.200.212.29:33313/#/home`,
        isBind: false
    },
    {
        id: 4,
        name: "核碳系统",
        img: app_4,
        // link: "http://101.200.62.30/",
        link: `http://113.200.212.29:33312/#/home`,
        isBind: false
    },
		{
        id: 5,
        name: "能碳系统",
        img: app_1,
        // link: "http://101.200.62.30/",
        link: `http://113.200.212.29:33312/#/home`,
        isBind: false
    }
]
const dataInfo = reactive({
	tableData1: [],
	tableData2: [],
	infolist: [{
		id: '1',
		title: '项目挂牌信息',
		img: img_1,
		time: '2023-01-01 10:00'
	}, {
		id: '2',
		title: '项目挂牌信息',
		img: img_2,
		time: '2023-01-01 10:00'
	}, {
		id: '3',
		title: '项目挂牌信息',
		img: img_3,
		time: '2023-01-01 10:00'
	}, {
		id: '4',
		title: '项目挂牌信息',
		img: img_4,
		time: '2023-01-01 10:00'
	}, {
		id: '5',
		title: '项目挂牌信息',
		img: img_1,
		time: '2023-01-01 10:00'
	},],
	announcementlist: [{
		id: '1',
		title: '平台公告信息平台公告信息平台公告信息…',
		time: '2023-01-01 10:00'
	}, {
		id: '2',
		title: '平台公告信息平台公告信息平台公告信息…',
		time: '2023-01-01 10:00'
	}, {
		id: '3',
		title: '平台公告信息平台公告信息平台公告信息…',
		time: '2023-01-01 10:00'
	}],
	nenghaoinfotb: [],
	nenghaolangfei: [
		{
			id: 1,
			name: "总点位",
			value: '43',
			unit: '',
			img: icon_9,
			iconcolor: '#DAF7F0',
			classname: ''
		},
		{
			id: 2,
			name: "待处理",
			value: '18',
			unit: '',
			img: icon_10,
			iconcolor: '#D5EAFF',
			classname: ''
		},
		{
			id: 3,
			name: "潜在节能空间（tce）",
			value: '343',
			unit: '',
			img: icon_11,
			iconcolor: '#E7E6FE',
			classname: 'up'
		}
	],
	chartDataJk: {},
	nenghaozl: [
		{
			id: 1,
			name: "计划能耗",
			value: '18.65万',
			unit: '',
			img: icon_1,
			iconcolor: '#DAF7F0',
			classname: ''
		},
		{
			id: 2,
			name: "实际能耗",
			value: '18.65万',
			unit: '',
			img: icon_2,
			iconcolor: '#D5EAFF',
			classname: ''
		},
		{
			id: 3,
			name: "较上月",
			value: '+50.32%',
			unit: '',
			img: icon_3,
			iconcolor: '#E7E6FE',
			classname: 'up'
		},
		{
			id: 4,
			name: "较去年同期",
			value: '-20.06%',
			unit: '',
			img: icon_4,
			iconcolor: '#FFF5CA',
			classname: 'down'
		}
	],
	tanpaifangList: [
		{
			id: 1,
			name: "已排放总量",
			value: '42,450',
			unit: '',
			img: icon_5,
			iconcolor: '#FFF5CA',
			classname: ''
		},
		{
			id: 2,
			name: "已耗能总量",
			value: '42,450',
			unit: '',
			img: icon_6,
			iconcolor: '#FFE9D5',
			classname: ''
		},
		{
			id: 3,
			name: "预计排放总量",
			value: '42,450',
			unit: '',
			img: icon_7,
			iconcolor: '#DAF7F0',
			classname: ''
		},
		{
			id: 4,
			name: "预计耗能总量",
			value: '42,450',
			unit: '',
			img: icon_8,
			iconcolor: '#FFF5CA',
			classname: ''
		}
	],
	chartDataFwzl: {
		
	}
})


onMounted(() => {
  // console.log('$router:', $router.currentRoute.value.query.type);
	if(userInfo.value){
    pageType.value = userInfo.value.type==`1`?`1`:`2`
	}else{
    pageType.value = '1';
	}
	// console.log('proxy.pageType.value:', proxy.pageType.value);
	loadHomeWasteDiscriminate()
	loadHomeMainDetail()
	loadHomeMonitorEnt()
	loadHomeServiceOverview()
	loadHomeEnergyOverview()
	loadHomeCarbonOverview()
	loadHomeIndustry()
	loadHomeEnt()
});
// 校验绑定状态，执行下一步操作
const checkAppAcount = (info: any) => {
    if(userInfo.value.authorityApp&&userInfo.value.authorityApp.indexOf(info.id)>-1){
        const telephone =userInfo.value.loginName
        window.open(info.link+`?telephone=${telephone}`, "_blank")
    }else{
        accountFormVisible.value = true
        appInfo.value = info
        accountRef.value.init(info)
    }
}
const agreenAuth = (appInfo:any)=>{
    const id = appInfo.id
    // const authorityApp = userInfo.value.authorityApp&&userInfo.value.authorityApp!==id?userInfo.value.authorityApp+id:id
    // usersEdit({...userInfo.value,authorityApp:authorityApp}).then(res=>{
    //     if(res.succ){
    //         accountRef.value.handleClose()
    //         if(userInfo.value.loginName){
    //             const telephone =userInfo.value.loginName
    //             window.open(appInfo.link+`?telephone=${telephone}`, "_blank")
    //         }
    //     }
    // })
    accountRef.value.handleClose()
    const telephone =userInfo.value.loginName
    window.open(appInfo.link+`?telephone=${telephone}`, "_blank")
}
// 能耗浪费
const loadHomeWasteDiscriminate = async (data: any) => {
  return new Promise((resolve, reject) => {
    getHomeWasteDiscriminate(data).then((res: any) => {
      console.log('res ===', res)
      if (res && res.status === 200) {
				dataInfo.nenghaolangfei[0].value = res.data.content.total
				dataInfo.nenghaolangfei[1].value = res.data.content.pending
				dataInfo.nenghaolangfei[2].value = res.data.content.space
        resolve(res)
      } else {
        resolve([])
      }
    }).catch(err => {
      reject(err)
    })
  })
}
// 主体详情
const loadHomeMainDetail = async (data: any) => {
  return new Promise((resolve, reject) => {
    getHomeMainDetail(data).then((res: any) => {
      console.log('res ===', res)
      if (res && res.status === 200) {
				dataInfo.nenghaoinfotb = res.data.content
        resolve(res)
      } else {
        resolve([])
      }
    }).catch(err => {
      reject(err)
    })
  })
}
// 监控设备
const loadHomeMonitorEnt = async (data: any) => {
  return new Promise((resolve, reject) => {
    getHomeMonitorEnt(data).then((res: any) => {
      console.log('res ===', res)
      if (res && res.status === 200) {
				dataInfo.chartDataJk = res.data.content
        resolve(res)
      } else {
        resolve([])
      }
    }).catch(err => {
      reject(err)
    })
  })
}
// 服务总览
const loadHomeServiceOverview = async (data: any) => {
  return new Promise((resolve, reject) => {
    getHomeServiceOverview(data).then((res: any) => {
      console.log('res ===', res)
      if (res && res.status === 200) {
				dataInfo.chartDataFwzl = res.data.content
        resolve(res)
      } else {
        resolve([])
      }
    }).catch(err => {
      reject(err)
    })
  })
}
// 能耗总览
const loadHomeEnergyOverview = async (data: any) => {
  return new Promise((resolve, reject) => {
    getHomeEnergyOverview(data).then((res: any) => {
      console.log('res ===', res)
      if (res && res.status === 200) {
				dataInfo.nenghaozl[0].value = res.data.content.plan
				dataInfo.nenghaozl[1].value = res.data.content.reality
				dataInfo.nenghaozl[2].value = res.data.content.lastMonth
				dataInfo.nenghaozl[2].classname = res.data.content.lastMonthStatus
				dataInfo.nenghaozl[3].value = res.data.content.lastYear
				dataInfo.nenghaozl[3].classname = res.data.content.lastYearStatus
        resolve(res)
      } else {
        resolve([])
      }
    }).catch(err => {
      reject(err)
    })
  })
}
// 碳排放总览
const loadHomeCarbonOverview = async (data: any) => {
  return new Promise((resolve, reject) => {
    getHomeCarbonOverview(data).then((res: any) => {
      console.log('res ===', res)
      if (res && res.status === 200) {
				dataInfo.tanpaifangList[0].value = res.data.content.discharge
				dataInfo.tanpaifangList[1].value = res.data.content.energy
				dataInfo.tanpaifangList[2].value = res.data.content.estimateDischarge
				dataInfo.tanpaifangList[3].value = res.data.content.estimateEnergy
        resolve(res)
      } else {
        resolve([])
      }
    }).catch(err => {
      reject(err)
    })
  })
}
// 行业top5
const loadHomeIndustry = async (data: any) => {
  return new Promise((resolve, reject) => {
    getHomeIndustry(data).then((res: any) => {
      console.log('res ===', res)
      if (res && res.status === 200) {
				dataInfo.tableData1 = res.data.content
        resolve(res)
      } else {
        resolve([])
      }
    }).catch(err => {
      reject(err)
    })
  })
}
// 碳服务top5
const loadHomeEnt = async (data: any) => {
  return new Promise((resolve, reject) => {
    getHomeEnt(data).then((res: any) => {
      console.log('res ===', res)
      if (res && res.status === 200) {
				dataInfo.tableData2 = res.data.content
        resolve(res)
      } else {
        resolve([])
      }
    }).catch(err => {
      reject(err)
    })
  })
}
</script>

<style lang="scss" scoped>
.home {
	display: flex;
	padding: 0 24px;
	.header {
		h1 {
			color: #242F57;
			font-size: 26px;
		}
		h2 {
			color: #636E95;
			font-size: 16px;
		}
	}
	.left-col {
		flex: 1;
		padding-right: 24px;
		.app-list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20px 0;
			li {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				width: 20%;
				margin-right: 20px;
				height: 140px;
				background-color: #fff;
				box-shadow: 0px 2px 4px 0px rgba(28,41,90,0.04);
				border-radius: 10px;
				cursor: pointer;
				&:last-child {
					margin-right: 0;
				}
				img {
					margin: 0 20px;
					width: 69px;
				}
				.name {
					font-size: 18px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 600;
					color: #242F57;
					padding-bottom: 5px;
				}
				.btn {
					font-size: 16px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #97A0C3;
				}
				// border: 1px solid #EAEDF7;
			}
		}
	}
	.right-col {
		width: 20%;
	}
}
</style>
